<template>
	<view>
		<navBar title="博客"></navBar>

		<view class="blog">
			<text class="blog-title">{{blogData.title}}</text>
		</view>
		<view class="blog">
			<u-parse :html="blogData.html_text"></u-parse>
		</view>
		<view class="tongzhi">
			(博客内容均出自知乎，如有侵权请联系我们进行删除)
		</view>
		<!-- 用户评论点赞 -->
		<view class="all">
			<view class="top">
				<view>
					<text>评论数:{{blogData.praiseSum}}</text>
				</view>
				<view>
					<text>收藏:</text>
					<u-icon :name="collect === 0 ? 'star' : 'star-fill'" color="#2979ff" size="50rpx"
						@click="changeBlogCollectType">
					</u-icon>
					<text style="padding-left: 30rpx;">点赞:</text>
					<u-icon :name="remark === 0 ? 'thumb-up' : 'thumb-up-fill'" color="#2979ff" size="50rpx"
						@click="changeBlogZanType">
					</u-icon>
				</view>
			</view>
			<view class="comment">
				<view class="comment-avatar">
					<u-avatar :src="userInfo.user_img"></u-avatar>
				</view>
				<view class="comment-input">
					<u-input type="textarea" maxlength="50" v-model="commentValue" :height="100" :border="true" placeholder="请输入评论内容"
						border-color="#2979ff" />
				</view>
				<view class="comment-icon">
					<text style="color: #2979FF;font-weight: bold;" @click="addComment">发表</text>
				</view>
			</view>
			<view>
			</view>
		</view>

		<!-- 博客评论列表 -->
		<view class="commentList">
			<view class="commentList-title">
				<text>评论列表</text>
			</view>
			<view v-for="(item,index) in twoComment" :key="item.id" class="commentList-item">
				<view class="commentList-item-avatar">
					<u-avatar :src="item.user_img"></u-avatar>
				</view>
				<view class="commentList-item-text">
					<text class="one">
						{{item.user_name}}
					</text>
					<text class="two">
						{{item.comment_text}}
					</text>
					<text class="three">
						{{item.updatedAt}}
					</text>
				</view>
			</view>
			<view class="lookMore">
				<text @click="popupShow = true">查看更多评论</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<!-- 添加评论模态框 -->
		<u-modal ref="uModal" :negative-top="transHeight" v-model="modalShow" title="添加评论" show-cancel-button
			:title-style="{color:'#2979ff'}" @confirm='addComment' :async-close="true">
			<view class="commentModal">
				<u-input type="textarea" maxlength="40" v-model="commentValue" placeholder="请输入评论内容" trim
					height="200" />
			</view>
		</u-modal>

		<u-toast ref="uToast" />

		<!-- 更多评论弹出层 -->
		<view>
			<u-popup v-model="popupShow" mode="bottom" height="1000rpx">
				<view class="commentList">
					<empty :pad="'100rpx'" v-show="comment.length === 0" :text="'此博客暂时还没有评论,快来留下它的第一条评论吧!'"></empty>
					<view v-for="(item2,index) in comment" :key="item2.id" class="commentList-item">
						<view class="commentList-item-avatar">
							<u-avatar :src="item2.user_img"></u-avatar>
						</view>
						<view class="commentList-item-text">
							<text class="one">
								{{item2.user_name}}
							</text>
							<text class="two">
								{{item2.comment_text}}
							</text>
							<text class="three">
								{{item2.updatedAt}}
							</text>
						</view>
					</view>
				</view>

				<!-- 底部触发加载更多 -->
				<view style="padding-bottom: 50rpx;">
					<u-loadmore :load-text="loadText"  :status="status" @loadmore="add" />
				</view>
				

			</u-popup>
		</view>
	</view>
</template>

<script>
	import throttle from "lodash/throttle";
	import {
		getBlogDetailData,
		changeBlogZan,
		addBlogComment,
		getBlogCommentList,
		changeBlogCollect
	} from '../../utils/blog.js'

	export default {
		data() {
			return {
				//用户id
				user_id: '',
				blogData: {},
				//控制评论和点赞是否显示
				isShow: false,
				//用户信息
				userInfo: {},
				//用户评论内容
				value: '',
				//博客点赞状态
				remark: 0,
				//前两条评论
				twoComment: [],
				//评论列表
				comment: [],
				//弹出框的显示与隐藏
				popupShow: false,
				//给弹出框用的高度
				height: '',
				pageNum: 1,
				pageSize: 5,
				//添加评论内容
				commentValue: '',
				//评论模态框的显示控制
				modalShow: false,
				//收藏状态
				collect: 0,
				transHeight: '',

				status: 'loadmore',
				//改变加载更多的文字
				loadText: {
					loadmore: '点击加载更多内容',
					loading: '正在加载,请喝杯奶茶',
					nomore: '没有更多了'
				}
			};
		},
		methods: {
			//获取博客详情数据
			async getData(blog_id, user_id) {
				let result = await getBlogDetailData(blog_id, user_id)
				if (result.code === 200) {
					this.blogData = result.data[0]
					this.getBlogComment()
					if (result.collect !== null && result.remark !== null) {
						this.remark = result.remark
						this.collect = result.collect
					}
				}
			},
			//改变博客点赞状态
			async changeBlogZanType() {
				if (this.isShow === true) {
					let data = {
						blog_id: this.blogData.blog_id,
						user_id: this.user_id
					}
					let type = this.remark === 0 ? 1 : 0
					let result = await changeBlogZan(type, data)
					if (result.code === 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
							duration: 1000
						})
						this.remark = this.remark === 0 ? 1 : 0
					} else {
						this.$refs.uModal.clearLoading();
						this.$refs.uToast.show({
							title: '您的账号已被封禁,请联系开发者',
							type: 'error',
							duration: 1000
						})
					}
				} else {
					this.$refs.uToast.show({
						title: '请先登录',
						type: 'warning',
						duration: 1000
					})
				}
			},
			//改变博客收藏状态
			async changeBlogCollectType() {
				if (this.isShow === true) {
					let data = {
						blog_id: this.blogData.blog_id,
						user_id: this.user_id
					}
					let type = this.collect === 0 ? 1 : 0
					let result = await changeBlogCollect(type, data)
					if (result.code === 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
							duration: 1000
						})
						this.collect = this.collect === 0 ? 1 : 0
					} else {
						this.$refs.uModal.clearLoading();
						this.$refs.uToast.show({
							title: '您的账号已被封禁,请联系开发者',
							type: 'error',
							duration: 1000
						})
					}
				} else {
					this.$refs.uToast.show({
						title: '请先登录',
						type: 'warning',
						duration: 1000
					})
				}
			},
			//获取博客评论列表
			async getBlogComment() {
				let result = await getBlogCommentList(this.blogData.blog_id, this.pageNum, this.pageSize)
				if (result.code === 200) {
					this.comment = [...this.comment, ...result.data]
					this.status = 'loadmore'
					this.twoComment = this.comment.map((item, index) => {
						if (index <= 1) {
							return item
						}
					}).filter(item => item !== undefined)
					if (result.data.length === 0) {
						this.status = 'nomore'
					}
				}
			},
			//查看更多评论
			lookMore() {
				console.log(111)
			},
			//添加评论
			async addComment() {
				if (this.commentValue === '' || this.commentValue.length < 2) {
					this.$refs.uToast.show({
						title: '内容不能为空或者小于2个字',
						type: 'warning',
						duration: 1000
					})
					this.$refs.uModal.clearLoading();
				} else {
					if (this.isShow === true) {
						let data = {
							comment_text: this.commentValue,
							blog_id: this.blogData.blog_id,
							user_id: this.user_id
						}
						let result = await addBlogComment(data)
						if (result.code === 200) {
							this.$refs.uToast.show({
								title: '评论成功',
								type: 'success',
							})
							this.modalShow = false;
							this.commentValue = ''
							this.pageNum = 1
							this.pageSize = 5
							this.comment = this.twoComment = ''
							this.getBlogComment()
						} else {
							this.$refs.uModal.clearLoading();
							this.$refs.uToast.show({
								title: '您的账号已被封禁,请联系开发者',
								type: 'error',
								duration: 1000
							})
						}
					} else {
						this.$refs.uToast.show({
							title: '登录以后才能发表评论哦',
							type: 'warning',
							duration: 1000
						})
						this.$refs.uModal.clearLoading();
					}
				}
			},
			//模态框显示并让他向上移动
			changeModal() {
				this.modalShow = true;
				console.log('执行了')
				uni.onKeyboardHeightChange(res => {
					this.transHeight = `${res.height}rpx`
				})
			},
			//加载更多评论
			add() {
				if (this.status === 'nomore') {
					return
				} else {
					this.pageNum++
					this.status = 'loading'
					setTimeout(() => {
						this.getBlogComment()
					}, 1000)
				}
			}
		},
		onLoad(option) {
			let id = uni.getStorageSync('userInfo').user_id
			this.user_id = id
			let user_id = id === undefined ? 0 : id
			this.getData(option.blog_id, user_id)
			this.userInfo = uni.getStorageSync('userInfo')
			this.isShow = id === undefined ? false : true
			this.height = uni.getSystemInfoSync().windowHeight * 1.5 + 'rpx'
		}
	}
</script>

<style lang="scss" scoped>
	.blog {
		width: 90%;
		margin: 0 auto;
		padding-top: 50rpx;

		.blog-title {
			font-size: 40rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
		}
	}
	
	.tongzhi{
		width: 90%;
		margin: 0 auto;
		color: #909399;
		padding-top: 30rpx;
	}

	.all {
		width: 90%;
		margin: 0 auto;
		padding-top: 60rpx;

		.top {
			font-size: 38rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.comment {

			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.comment-avatar {
				width: 15%;
			}

			.comment-input {
				width: 70%;
			}
			.comment-icon {
				width: 10%;
			
				image {
					width: 100%;
					height: 65rpx;
				}
			}
		}
	}

	.commentList {
		padding-top: 60rpx;
		width: 90%;
		margin: 0 auto;

		.commentList-title {
			font-size: 32rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}

		.commentList-item {
			display: flex;
			padding-bottom: 60rpx;

			.commentList-item-avatar {
				width: 20%;
			}

			.commentList-item-text {
				width: 80%;
				display: flex;
				flex-direction: column;

				.one {
					font-size: 35rpx;
					font-weight: bold;
					padding-bottom: 10rpx;
				}

				.two {
					font-size: 29rpx;
					color: #606266;
					padding-bottom: 15rpx;
				}

				.three {
					font-size: 25rpx;
					color: #909399;
				}
			}
		}

		.lookMore {
			display: flex;
			justify-content: center;
			color: #909399;
			padding-bottom: 50rpx;
		}
	}

	.commentModal {
		width: 90%;
		margin: 0 auto;
	}
</style>
